 <template>  
   <view class="page-container">   
    <image class="bg-image" src="/static/image.jpg" mode="aspectFill"></image>
    
     <view class="content">
       <!-- 添加顶部导航栏 -->
       <view class="nav-bar">
         <view class="back-btn" @click="goBack">
           <image src="/static/return.png" mode="aspectFit" class="back-icon"/>
         </view>
        <text class="nav-title">账号登录</text>
       </view>

       <view class="input-group">
         <text class="label">账号</text>
         <input  
           v-model="user_account"  
           class="input"  
          placeholder="请输入账号"  
           placeholder-class="placeholder"
           type="text"  
         />  
       </view>

       <view class="input-group">
        <text class="label">密码</text>
         <view class="password-container">
           <input  
             v-model="user_password"  
             class="input"  
             placeholder="请输入密码"  
             placeholder-class="placeholder"
            :type="showPassword ? 'text' : 'password'"  
          />  
         <image
            class="password-toggle"
            :src="showPassword ? '/static/btn_hide_login.png' : '/static/btn_visible_login.png'"
             @click="togglePassword"
            mode="aspectFit"
          />
        </view>
      </view>
      
       <button class="submit-button" @click="handleLogin">登录</button>  
      
       <view class="footer">  
         <text class="link" @click="gotoRegister">注册账号</text>  
         <text class="link" @click="gotoResetPassword">忘记密码</text>  
    </view>  
    </view>
   </view>  
 </template>  

 <script>
 import { login, me } from '/api/user.js'

export default {
    data() {
        return {
            user_account: '',
            user_password: '',
            showPassword: false
        }
    },

    methods: {
        togglePassword() {
            this.showPassword = !this.showPassword
        },

        async handleLogin() {
            if (!this.user_account || !this.user_password) {
                uni.showToast({
                    title: '账号或密码不能为空',
                    icon: 'none'
                })
                return
            }

            const formData = {
                user_account: this.user_account,
                user_password: this.user_password
            }

            try {
                const res = await login(formData)
                console.log('登录完整响应:', res)

                if (res.data.code = 2000) {
                    // 获取完整的响应对象
                    const loginResponse = await new Promise((resolve, reject) => {
                        uni.request({
                            url: 'http://127.0.0.1:5000/api_1_0/user/login',
                            method: 'POST',
                            data: formData,
                            header: {
                                'content-type': 'application/x-www-form-urlencoded'
                            },
                            success: async (response) => {
                                console.log('原始响应:', response)
                                const authorization = response.header?.Authorization || 
                                                   response.header?.authorization
                                
                                if (authorization) {
                                    console.log('找到 Authorization:', authorization)
                                    uni.setStorageSync('token', authorization)
                                    
                                    // 登录成功后立即获取用户信息
                                    try {
                                        const userInfoRes = await me()
                                        console.log('获取到的用户信息：', userInfoRes)
                                        
                                        if (userInfoRes.code === '2000') {
                                            // 保存完整的用户信息
                                            const userInfo = {
                                                user_id: userInfoRes.data.user_id,
                                                user_name: userInfoRes.data.user_name,
                                                user_account: userInfoRes.data.user_account,
                                                user_head: userInfoRes.data.user_head || '/static/me.png'
                                            }
                                            
                                            uni.setStorageSync('userInfo', userInfo)
                                            uni.setStorageSync('user_id', userInfoRes.data.user_id)
                                            
                                            // 显示成功提示
                                            uni.showToast({
                                                title: '登录成功',
                                                icon: 'success',
                                                duration: 1500
                                            })

                                            // 跳转到首页
                                            setTimeout(() => {
                                                uni.navigateTo({
                                                    url: '/pages/home/home'
                                                })
                                            }, 1500)
                                        } else {
                                            console.error('获取用户信息失败')
                                        }
                                    } catch (error) {
                                        console.error('获取用户信息失败:', error)
                                    }
                                }
                                resolve(response)
                            },
                            fail: reject
                        })
                    })
                } else {
                    uni.showToast({
                        title: res.message || '登录失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('登录失败:', error)
                uni.showToast({
                    title: '登录失败，请重试',
                    icon: 'none'
                })
            }
        },

        //获取保存的 token
        getToken() {
            const token = uni.getStorageSync('token')
            console.log('当前Token:', token)
            return token
        },

        // 清除 token
        clearToken() {
            uni.removeStorageSync('token')
            console.log('Token已清除')
        },

        gotoRegister() {  
            uni.navigateTo({  
                url: '/pages/login/register/register'  
            });  
        },  
        
        gotoResetPassword() {  
            uni.navigateTo({  
                url: '/pages/login/forgetPassword/forgetPassword'
            });  
        },  
        goBack() {
            uni.navigateBack();
        },

        gotoHome() {
            uni.reLaunch({
                url: '/pages/home/home'
            })
        }
    }  
};  
 


</script>  

<style>
.page-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.bg-image {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.input-group {  
  margin-bottom: 20px;  
}  

.label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
}

.input {
  width: 92%;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 0 15px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.password-container {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.submit-button {  
  background: rgba(107, 75, 138, 0.8);
  color: white;
  height: 45px;
  border: none;
  border-radius: 25px;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  margin-top: 40px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  backdrop-filter: blur(5px);
}  

.footer {  
  display: flex;  
  justify-content: space-between;  
  margin-top: 20px;  
  padding: 0 10px;
}  

.link {  
  color: #6B4B8A;
  font-size: 14px;  
  font-weight: 500;
  padding: 5px;
}  

.nav-bar {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  margin-bottom: 20px;
}

.back-btn {
  padding: 30px;
  margin-left: -50px;
}

.back-icon {
  width: 30px;
  height: 30px;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin-right: 40px;
  color: #333;
}
</style>